<template>

    <div class="resume-container">
        <div class="table-head">
            员工履历表
            <a :href="downloadUrl" class="btn-download rt"><i class="fa fa-download" aria-hidden="true"></i>导出履历表</a>
        </div>
        <table id="signTab" class="table table-bordered">
            <tbody>
                    <tr>
                        <td width="5%" class="label-bold" :rowspan="col">员<br>工<br>个<br>人<br>信<br>息</td>
                        <td width="15%" class="label-bold">姓名</td>
                        <td width="15%">{{info && info.name}}</td>
                        <td width="12%" class="label-bold">所在部门</td>
                        <td width="12%">{{info && info.dept_descr}}</td>
                        <td width="12%" class="label-bold">职位</td>
                        <td width="12%">{{info && info.position_desc}}</td>
                        <td width="17%" rowspan="5">
                            <img :src="srcImg" width="100%" alt="" class="form-photo">
                        </td>
                    </tr>
                    <tr>
                        <td class="label-bold">性别</td>
                        <td>{{info && info.sex_descr}}</td>
                        <td class="label-bold">民族</td>
                        <td>{{info && info.ethnic_grp}}</td>
                        <td class="label-bold">出生日期</td>
                        <td>{{info && info.birthdate | handleDate}}</td>
                    </tr>
                    <tr>
                        <td class="label-bold">政治面貌</td>
                        <td>{{info && info.political_sta_chn}}</td>
                        <td class="label-bold">婚姻状况</td>
                        <td>{{info && info.mar_desc}}</td>
                        <td class="label-bold">籍贯</td>
                        <td>{{info && info.native_place_chn}}</td>
                    </tr>
                    <tr>
                        <td class="label-bold">出生地</td>
                        <td>{{info && info.birthplace}}</td>
                        <td class="label-bold">手机号码</td>
                        <td>{{info && info.busn_mobile}}</td>
                        <td class="label-bold">电子邮件</td>
                        <td>{{info && info.email_addr}}</td>
                    </tr>
                    <tr>
                        <td class="label-bold">最高学历</td>
                        <td>{{info && info.highest_edu}}</td>
                        <td class="label-bold">最高学位</td>
                        <td>{{info && info.highest_deg}}</td>
                        <td class="label-bold">毕业院校及专业</td>
                        <td>{{info && info.school_descr}}&nbsp;{{info && info.major_descr}}</td>
                    </tr>
                    
                    <tr>
                        <td class="label-bold" :rowspan="eduLength">教<br>育<br>经<br>历</td>
                        <td class="label-bold">起 止 日 期</td>
                        <td class="label-bold" colspan="2">毕业院校</td>
                        <td class="label-bold">专业</td>
                        <td class="label-bold">学历</td>
                        <td class="label-bold">学位</td>
                        <td class="label-bold">教育形式</td>
                    </tr>

                    <tr v-for="eduItem in edu" :key="eduItem.id">                     
                      <td>{{eduItem.bgn_dt | handleWorkDate && '-'}}{{eduItem.end_dt | handleWorkDate}}&nbsp;</td>
                      <td colspan="2">{{eduItem.school_descr}}</td>
                      <td>{{eduItem.major_descr}}</td>
                      <td>{{eduItem.education}}</td>
                      <td>{{eduItem.edu_degree}}</td>
                      <td>{{eduItem.educ_type}}</td>           
                    </tr>
 
                    <tr v-for="item in eduWhite" >
                        
                            <td>&nbsp;</td>
                            <td colspan="2">&nbsp;</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>   
                        
                    </tr>

                    <tr>
                        <td class="label-bold" :rowspan="workExp">工<br>作<br>经<br>历</td>
                        <td class="label-bold" colspan="2">起 止 日 期</td>
                        <td class="label-bold" colspan="2">工作单位</td>
                        <td class="label-bold">部门</td>
                        <td class="label-bold" colspan="2">职位</td>
                    </tr>
                    <tr v-for="workItem in work" :key="workItem.id">
                        
                            <td>{{workItem.start_dt | handleDate}}</td>
                            <td>{{workItem.end_dt | handleDate}}</td>
                            <td colspan="2">{{workItem.employer}}</td>
                            <td>{{workItem.dept_descr}}</td>
                            <td colspan="2">{{workItem.ending_title}}</td>
                      
                    </tr>
                    <tr v-for="me in workWhite">
                        
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td colspan="2">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td colspan="2">&nbsp;</td>
                      
                    </tr>
                                                                         
                    <tr>
                        <td class="label-bold" :rowspan="relationLength">家<br>庭<br>成<br>员<br>及<br>主<br>要<br>社<br>会<br>关<br>系</td>
                        <td class="label-bold">姓名</td>
                        <td class="label-bold">与本人关系</td>
                        <td class="label-bold" colspan="2">工作单位</td>
                        <td class="label-bold">职位</td>
                        <td class="label-bold" colspan="2">联系电话</td>
                    </tr>
                    <tr v-for="relationItem in relation" :key="relationItem.id">
                        
                            <td>{{relationItem && relationItem.name}}&nbsp;</td>
                            <td>{{relationItem && relationItem.relationship}}&nbsp;</td>
                            <td colspan="2">{{relationItem && relationItem.school_descr}}&nbsp;</td>
                            <td>{{relationItem && relationItem.occupation}}&nbsp;</td>
                            <td colspan="2">{{relationItem && relationItem.phone}}&nbsp;</td>
                    </tr>
                    <tr v-for="relationItem in relationWhite">
                            <td>&nbsp;</td>
                            <td></td>
                            <td colspan="2"></td>
                            <td></td>
                            <td colspan="2"></td>
                        
                    </tr>


                    <tr>
                        <td class="label-bold" :rowspan="certificateLength">所<br>获<br>证<br>书</td>
                        <td class="label-bold" colspan="2">证书名称</td>
                        <td class="label-bold" colspan="2">证书等级</td>
                        <td class="label-bold">发证日期</td>
                        <td class="label-bold" colspan="2">发证机构</td>
                    </tr>

                     <tr v-for="certificateItem in certificate" :key="certificateItem.id">
                        
                            <td colspan="2">{{certificateItem.certificate}}&nbsp;</td>
                            <td colspan="2">{{certificateItem.cert_grade}}&nbsp;</td>
                            <td >{{certificateItem.issue_date | handleBirthdate}}&nbsp;</td>
                            <td colspan="2">{{certificateItem.issue_authority}}&nbsp;</td>
                      
                    </tr>
                    <tr v-for="relationItem in certificateWhite">
                            <td colspan="2">&nbsp;</td>
                            <td colspan="2"></td>
                            <td></td>
                            <td colspan="2"></td>         
                    </tr>                          
                </tbody>
        </table>
    </div>



</template>
<script>
import { _decode } from '@/common/js/handleCode'

export default {
  name: 'resume',
  data () {
    return {
      personResumeInfo: null,
      info: null,
      imgsrc: null,
      work: null,
      workWhite: ['','','',''],
      workLength: null,
      edu: ['','','',''],
      eduWhite: [],
      relation: ['',''],
      relationWhite:['',''],
      // workWhite: null,
      // workLength: null,
      // edu: [],
      // eduWhite: null,
      // relation: null,
      // relationWhite: null,
      certificate: ['','','',''],
      certificateWhite: null,
      col: 5,
      workExp: 8,
      eduLength: 5,
      relationLength: 5,
      certificateLength: 5,
      srcImg: null,
      params: {}
    }
  },

  computed: {

    downloadUrl: function () {
      let type = this.params.resumeType
      let url = type == 1 ? this.URL.userResumeExport.url : this.URL.employResumeExport.url
      if (type == 1) {
        return this.Axios.baseURI + url + '?token=' + localStorage.getItem('token')
      } else {
        return this.Axios.baseURI + url + '?emplid=' + this.params.emplid + '&token=' + localStorage.getItem('token')
      }

    }
  },
  filters: {
    handleBirthdate: function (value) {
      if (!value) {
        return ''
      }
      return value.split(' ')[0]
    },
    handleDate: function (value) {
      if (!value) {
        return ''
      }
      return value.split(' ')[0].replace(/-/g, function () {
        return '.'
      })
    },
    handleWorkDate: function (value) {
      if (!value) {
        return ''
      }
      return value
        .split(' ')[0]
        .replace(/-/, function () {
          return '.'
        })
        .split('-')[0]
    }
  },
  methods: {

    setParam () {
      const urlParam = window.location.search.split('?')[1]
      urlParam && (this.params = JSON.parse(_decode(urlParam)))
    },
    getImg () {
      let type = this.params.resumeType

      if (type == 2) {
        this.srcImg = this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + this.params.emplid + '&sex=' + this.params.sex + '&token=' + localStorage.getItem('token')
        return
      } else {
        this.srcImg = this.Axios.baseURI + this.URL.getLoginUserImg.url + '?token=' + localStorage.getItem('token')
        return
      }
    },

    //获取侧边菜单栏数据
    getLeftMenu () {
      let type = this.params.resumeType
      let url = type == 1 ? this.URL.getEmployeeDetail.url : this.URL.resumeForm.url
      let params = type == 1 ? {} : { emplid: this.params.emplid }
      this.Axios
        .Post(url, params)
        .then((res) => {
          let personResumeInfo =
            typeof res.data === 'string'
              ? JSON.parse(res.data).datas
              : res.data.datas


          this.personResumeInfo = personResumeInfo

          if (res.data.status == 1) {
            this.info = personResumeInfo.info[0]
            this.work = personResumeInfo.work
          } else {
            this.info = []
            this.work = []
          }

          if (this.work.length < 7) {
            this.workWhite = new Array(7 - this.work.length)
          } else {
            this.workExp = this.work.length + 1
          }
          this.edu = JSON.parse(JSON.stringify(personResumeInfo.edu))

          if (this.edu.length < 4) {
            this.eduWhite = new Array(4 - this.edu.length)
          } else {
            this.eduLength = this.edu.length + 1
          }

          this.relation = JSON.parse(JSON.stringify(personResumeInfo.relation))

          if (this.relation.length < 4) {
            this.relationWhite = new Array(4 - this.relation.length)
          } else {
            this.relationLength = this.relation.length + 1
          }

          this.certificate = JSON.parse(
            JSON.stringify(personResumeInfo.certificate)
          )

          if (this.certificate && this.certificate.length < 4) {
            this.certificateWhite = new Array(4 - this.certificate.length)
          } else {
            this.certificateLength = this.certificate.length + 1
          }
        })
    },

  },
  mounted () {
    this.setParam()
    //获取侧边菜单栏数据
    this.getLeftMenu()

    this.getImg()
  }
}
</script>
<style scoped>
.resume-container .table-head {
  font-size: 24px;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}
.resume-container .table-head .btn-download {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

.resume-container {
  width: 86%;
  max-width: 1000px;
  margin: auto;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background-color: #fff;
}

.resume-container .table-bordered {
  border: 1px solid #ddd;
}
.resume-container .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.resume-container .table-bordered td {
  border: 1px solid #ddd;
}
.resume-container .table .label-bold {
  font-weight: bold;
}
.resume-container .form-photo {
  width: 222px;
  height: 222px;
  vertical-align: middle;
}

.resume-container .table tbody tr td {
  text-align: center;
  vertical-align: middle;
  font-family: 宋体;
  word-break: break-all;
}
.resume-container .table > thead > tr > th,
.table > tbody > tr > th,
.resume-container .table > tfoot > tr > th,
.table > thead > tr > td,
.resume-container .table > tbody > tr > td,
.resume-container .table > tfoot > tr > td {
  padding: 8px;
  border-top: 1px solid #ddd;
}
</style>
<style>
.resume-container .table {
  overflow: auto;
}
</style>

